<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <head th:replace="~{common/head}"></head>
    <style>
        /**
         * 图标示例样式(这里单独放页面中)
         * example-icons
         */
        .example-icons {
            padding: 0 20px 10px 20px;
            -webkit-column-count: 4;
            -moz-column-count: 4;
            column-count: 4;
            -webkit-column-gap: 20px;
            -moz-column-gap: 20px;
            column-gap: 20px;
        }

        .example-icons div {
            line-height: 2.5em;
        }

        .example-icons div span {
            cursor: pointer;
            font-size: 14px;
            text-overflow: ellipsis;
            display: inline-block;
            max-width: calc(100% - 90px);
            overflow: hidden;
            vertical-align: middle;
            white-space: nowrap;
        }

        .example-icons div code:hover,
        .example-icons div span:hover,
        .example-icons div i:hover {
            color: #33cabb;
        }

        .example-icons div code:hover {
            border-color: #33cabb;
        }

        .example-icons div code {
            border: 1px solid #DDD;
            width: 46px;
            margin-left: 2px;
            margin-right: 4px;
            border-radius: 4px;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            line-height: 24px;
            cursor: pointer;
        }

        .example-icons div i {
            display: inline-block;
            width: 32px;
            height: 24px;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            line-height: 24px;
        }

        .example-icons .mdi:before {
            font-size: 24px;
        }
    </style>
</head>
<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="~{common/aside::aside}"></div>
        <!--End 左侧导航-->

        <!--头部信息aside-->
        <div th:replace="~{common/aside::header}"></div>
        <!--End 头部信息aside-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header"><h4>正在进行活动</h4></div>
                            <div class="card-body" style="width: 100%;float: left">
                                <div class="table-responsive" style="width: 50%;float: left">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th style="width: 20%">活动名称</th>
                                            <th style="width: 10%">活动类型</th>
                                            <th style="width: 10%">倍数</th>
                                            <th style="width: 10%">删除</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="event:${allActivityLog}">
                                            <td th:text="${event.getLog_name()}"></td>
                                            <td th:text="${event.getEvent_type()}"></td>
                                            <td th:text="${event.getParameter1()}"></td>
                                            <td sec:authorize="hasAnyAuthority('VIP','ROOT')">
                                                <div class="btn-group">
                                                    <a class="btn btn-xs btn-default"
                                                       th:href="@{/activity/delete(log_id=${event.getLog_id()})}"
                                                       title="删除"
                                                       data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="form-group" style="width: 50%;float: left">
                                    <label class="col-xs-12" for="example-select">可添加活动列表</label>
                                    <div class="col-xs-12" style="width: 50%;float: left">
                                        <select class="form-control" id="example-select" name="example-select"
                                                size="15">
                                            <option th:each="eventInfo:${allActivityInfo}"
                                                    th:value="${eventInfo.getEvent_id()}"
                                                    th:text="${eventInfo.getEvent_explain()}"
                                                    th:selected="${eventInfo.getEvent_explain()}"></option>
                                        </select>
                                    </div>
                                    <div style="width: 40%;float: left">
                                        <label class="col-xs-12" for="example-select">活动参数</label>
                                        <input class="form-control" type="text" id="example-text-input-info"
                                               name="example-text-input-info" placeholder="1表示开启活动,100即为1倍,200为两倍">
                                        <button class="btn btn-success" type="button" style="margin-top: auto"
                                                onclick="addevent()" sec:authorize="hasAnyAuthority('VIP','ROOT')">添加活动
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script src="/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/js/lightyear.js"></script>
<script type="text/javascript">
    // onclick触发js
    let addevent = () => {
        let myselect = document.getElementById("example-select");
        let index = myselect.selectedIndex;
        let event_type = myselect.options[index].value
        let parameter1 = $("input[name = 'example-text-input-info']");
        lightyear.loading('show');
        $.ajax({
                type: "POST",
                url: "/activity/add",
                data: {
                    "event_type": event_type,
                    "parameter1": parameter1.val(),
                },
                success: function (result) {
                    if (result.result === 1) {
                        window.location.href = "/activity/all";
                    } else {
                        setTimeout(function () {
                            lightyear.loading('hide');
                            lightyear.notify('添加失败~是不是已经存在了', 'danger');
                        }, 1e3)
                    }
                },
                error: function (data) {
                    setTimeout(function () {
                        lightyear.loading('hide');
                        lightyear.notify('服务器错误请重试~', 'danger');
                    }, 1e3)
                },
            beforeSend: function () {
                if (parameter1.val() === "") {
                    setTimeout(function () {
                        lightyear.loading('hide');
                        lightyear.notify('请务必输入参数', 'danger');
                    }, 1e3)
                    parameter1.focus();
                    return false;
                }
                if (parameter1.val() != 1 && parameter1.val()%100 != 0) {
                    setTimeout(function () {
                        lightyear.loading('hide');
                        lightyear.notify('请输入1或100的倍数', 'danger');
                    }, 1e3)
                    parameter1.focus();
                    return false;
                }
            }
        });
    };
</script>
</body>
</html>